<template>
  <el-date-picker
    ref="datePicker"
    v-bind="$attrs"
    v-on="$listeners"
    v-model="date"
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    :editable="editable"
    :append-to-body="appendToBody"
    :picker-options="limit ? pickerOptions : null"
    :align="align"
    :unlink-panels="true"
    :default-time="defaultTime"
    @change="change"
  >
  </el-date-picker>
</template>
<script>
export default {
  name: "DateTimeRange",
  inheritAttrs: false,
  props: {
    value: {
      type: Array,
      require: true,
      default: [],
    },
    limit: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    value: {
      handler() {
        this.date = this.value;
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    appendToBody() {
      return this.$attrs["append-to-body"] ? true : false;
    },
    editable() {
      return this.$attrs["editable"] ? true : false;
    },
  },
  data() {
    return {
      date: [],
      align: "center",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultTime: ["00:00:00", this.parseTime(new Date(), "{h}:00:00")],
    };
  },
  methods: {
    change(time) {
      this.$emit("update:value", time || ["", ""]);
    },
  },
};
</script>
